/**
 * 新增沟通记录
 */

import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Modal, Input } from 'antd';
import React, { useState, useCallback, useEffect } from 'react';
import { useRequest } from '@umijs/hooks';
import moment from 'moment';

import { Const } from '../../Const';

const FormItem = Form.Item;
const { TextArea } = Input;

const AddCommunicationRecord = props => {

  const { modalVisible, onCancel, form, onSubmit, itemData, type } = props;

  // 确定
  const okHandle = useCallback(() => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      if (type === 'edit') fieldsValue.id = itemData.id;
      onSubmit(fieldsValue);
    });
  }, [itemData, type]);

  return (
    <Modal
      destroyOnClose
      title="新增编辑沟通记录"
      visible={modalVisible}
      onOk={okHandle}
      onCancel={onCancel}
      maskClosable={false}
    >
      <FormItem {...Const.formLayout} label="通话内容">
        {form.getFieldDecorator('contactContent', {
          rules: [
            { required: true, message: '请输入通话内容' }
          ],
          initialValue: itemData.contactContent || ''
        })(
          <TextArea autoSize={{ minRows: 3, maxRows: 3 }} placeholder="请输入" maxLength={1000} />
        )}
      </FormItem>
      <FormItem {...Const.formLayout} label="备注">
        {form.getFieldDecorator('contactRemark', {
          rules: [],
          initialValue: itemData.contactRemark || ''
        })(
          <TextArea autoSize={{ minRows: 3, maxRows: 3 }} placeholder="请输入" maxLength={1000} />
        )}
      </FormItem>
    </Modal>
  )
};

export default Form.create()(AddCommunicationRecord);
